// 业务概览
<template>
  <div class="p-15 otherStyle">
    <el-row :gutter="18">
      <el-col :span="6">
        <div class="wjjgd">
          <echarts-load v-if="loading1 || reload1" :chartFlag="loading1" :reload="reload1" @refreshF="refresh1" />
          <div v-else>
            <span>未解决工单</span>
            <div class="wjjgdTupianBox">
              <svg class="iconfont" style="width: 70px; height: 70px; vertical-align: middle; padding-right: 5px">
                <use xlink:href="#el-icon-mywork_order" style="font-size: 50px" />
              </svg>
              <div class="wjjgdNumbox">
                <span v-text="weijiejue"></span>
                <span>未解决工单数量</span>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="18">
        <div class="ThirtyGD">
          <echarts-load v-if="loading2 || reload2" :chartFlag="loading2" :reload="reload2" @refreshF="refresh2" />
          <div v-else>
            <span>近30天工单时效性</span>
            <ul class="ThirtyGDItemBox">
              <li class="ThirtyGDTupianBox">
                <svg class="iconfont" style="width: 56px; height: 56px; vertical-align: middle; padding-right: 5px">
                  <use xlink:href="#el-icon-myWork_order_quantity" style="font-size: 50px" />
                </svg>
                <div class="ThirtyGDdNumbox">
                  <span style="font-size: 30px; color: #fff" v-text="ThirtyGD.gdOne"></span>
                  <span style="color: #fff">近30天工单数量</span>
                </div>
              </li>
              <li class="ThirtyGDTupianBox">
                <svg class="iconfont" style="width: 56px; height: 56px; vertical-align: middle; padding-right: 5px">
                  <use xlink:href="#el-icon-myproblem2" style="font-size: 50px" />
                </svg>
                <div class="ThirtyGDdNumbox">
                  <span style="font-size: 18px; color: #1989fa">{{ ThirtyGD.gdTwo }} 小时</span>
                  <span>近30天问题生成故障平均耗时</span>
                </div>
              </li>
              <li class="ThirtyGDTupianBox">
                <svg class="iconfont" style="width: 56px; height: 56px; vertical-align: middle; padding-right: 5px">
                  <use xlink:href="#el-icon-myfaultsvg2" style="font-size: 50px" />
                </svg>
                <div class="ThirtyGDdNumbox">
                  <span style="font-size: 18px; color: #f56c6c">{{ ThirtyGD.gdThree }} 小时</span>
                  <span>近30天故障生成工单平均耗时</span>
                </div>
              </li>
              <li class="ThirtyGDTupianBox">
                <svg class="iconfont" style="width: 56px; height: 56px; vertical-align: middle; padding-right: 5px">
                  <use xlink:href="#el-icon-mycomplete" style="font-size: 50px" />
                </svg>
                <div class="ThirtyGDdNumbox">
                  <span style="font-size: 18px; color: #4ecb73">{{ ThirtyGD.gdFour }} 小时</span>
                  <span>近30天工单完成平均耗时</span>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="18">
      <el-col :span="6">
        <div class="gzwanchanBox">
          <echarts-load v-if="loading3 || reload3" :chartFlag="loading3" :reload="reload3" @refreshF="refresh3" />
          <div v-else>
            <span>近30天工单故障率/完成率</span>
            <pie v-if="!loading3 || !reload3" :chartsData="finishPieData" />
            <pie v-if="!loading3 || !reload3" :chartsData="faultPieData" />
          </div>
        </div>
      </el-col>
      <el-col :span="18">
        <div class="gzwanchanBox">
          <echarts-load v-if="loading4 || reload4" :chartFlag="loading4" :reload="reload4" @refreshF="refresh4" />
          <line1 v-else :chartsData="chartData4" />
        </div>
        <!-- <div id="gdqushi" :style="{width:'100%',height:'420px'}" v-loading="loading4"></div> -->
      </el-col>
    </el-row>
    <el-row :gutter="18">
      <el-col :span="8" style="position: relative">
        <div class="topBox" v-loading="loading5">
          <el-radio-group v-model="radioList" @change="radioChang">
            <el-radio-button label="近30天问题TOP5"></el-radio-button>
            <el-radio-button label="近30天设备故障TOP5"></el-radio-button>
          </el-radio-group>
          <div :style="{ width: '100%', height: '350px' }">
            <echarts-load v-if="loading5 || reload5" :chartFlag="loading5" :reload="reload5" @refreshF="refresh5" />
            <category v-else :chartsData="topData" />
          </div>
        </div>
      </el-col>
      <el-col :span="16" style="position: relative">
        <div class="Thirtywtgzzs">
          <span>近30天问题趋势</span>
          <!-- <div id="wentigzList" :style="{width:'100%',height:'350px'}"></div> -->
          <echarts-load v-if="loading6 || reload6" :chartFlag="loading6" :reload="reload6" @refreshF="refresh6" />
          <line2 v-else :chartsData="lineData" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
// import { endLoading } from '@/utils/loading.js'
import { yeWu, xunJian } from '@/utils/allUrl.js'
// import { getUrl } from '@/utils/getUrl.js'
// import echarts from 'echarts'
import { timeLoad, timestampToTime } from '@/assets/js/setTime'
import echartsLoad from '@/components/Echarts/echartsLoad'
import pie from '@/components/Echarts/YWGL/pie'
import line1 from '@/components/Echarts/YWGL/line1'
import line2 from '@/components/Echarts/YWGL/line2'
import category from '@/components/Echarts/YWGL/category'
export default {
  data() {
    return {
      radioList: '近30天问题TOP5', // top切换
      weijiejue: 0, // 未解决工单
      ThirtyGD: {
        gdOne: 0,
        gdTwo: 0,
        gdThree: 0,
        gdFour: 0,
      },
      loading1: false, // 获取为解决工单
      reload1: false,
      Timer1: null,
      loading2: false, // 近30天工单时效性
      reload2: false,
      Timer2: null,
      loading3: false, // 近30天工单故障率/完成率
      reload3: false,
      Timer3: null,
      loading4: false, // 近30天工单故障、工单完成趋势
      reload4: false,
      Timer4: null,
      loading5: false, // top5
      reload5: false,
      Timer5: null,
      loading6: false, // 近30天问题/故障总数走势
      reload6: false,
      Timer6: null,
      faultPieData: {}, // 故障
      finishPieData: {}, // 完成
      chartData4: {},
      topData: {}, // TOP5
      topType: 1,
      lineData: {}, // 近30天工单故障、工单完成趋势
    }
  },
  components: { echartsLoad, pie, line1, category, line2 },
  watch: {
    loading1(newVal, oldVal) {
      this.Timer1 = setTimeout(() => {
        if (this.loading1) {
          this.loading1 = false
          this.reload1 = true
        }
      }, timeLoad)
    },
    loading2(newVal, oldVal) {
      this.Timer2 = setTimeout(() => {
        if (this.loading2) {
          this.loading2 = false
          this.reload2 = true
        }
      }, timeLoad)
    },
    loading3(newVal, oldVal) {
      this.Timer3 = setTimeout(() => {
        if (this.loading3) {
          this.loading3 = false
          this.reload3 = true
        }
      }, timeLoad)
    },
    loading4(newVal, oldVal) {
      this.Timer4 = setTimeout(() => {
        if (this.loading4) {
          this.loading4 = false
          this.reload4 = true
        }
      }, timeLoad)
    },
    loading5(newVal, oldVal) {
      this.Timer5 = setTimeout(() => {
        if (this.loading5) {
          this.loading5 = false
          this.reload5 = true
        }
      }, timeLoad)
    },
    loading6(newVal, oldVal) {
      this.Timer6 = setTimeout(() => {
        if (this.loading6) {
          this.loading6 = false
          this.reload6 = true
        }
      }, timeLoad)
    },
  },
  created() {
    this.getweijiejue() // 获取为解决工单
    this.getThirtyGDlist() // 近30天工单时效性
    this.getThirtygzList() // 近30天工单故障率/完成率
    this.getThirtygdqus() // 近30天工单故障、工单完成趋势
    this.getTopFList('BM') // 近30天问题TOP5
    this.getThirtygdlv() // 近30天问题/故障总数走势
  },
  methods: {
    // 未解决工单
    async getweijiejue() {
      this.loading1 = true
      const { data: res } = await this.$http.post(`${yeWu}gdjs/wjjgd`)
      switch (res.code) {
        case '0000':
          this.weijiejue = res.data.count
          break
        case '0013':
          this.weijiejue = '0'
          break
        default:
          this.reload1 = true
          break
      }
      this.loading1 = false
    },
    refresh1() {
      this.reload1 = false
      this.getweijiejue()
    },
    // 近30天工单时效性
    async getThirtyGDlist() {
      this.loading2 = true
      const { data: res } = await this.$http.post(`${yeWu}gdjs/gdsxx`)
      switch (res.code) {
        case '0000':
          this.ThirtyGD = {
            gdOne: res.data.gdCount,
            gdTwo: res.data.daysByGz,
            gdThree: res.data.daysByGd,
            gdFour: res.data.daysByGdWcSj,
          }
          break
        case '0013':
          this.ThirtyGD = {
            gdOne: 0,
            gdTwo: 0,
            gdThree: 0,
            gdFour: 0,
          }
          break
        default:
          this.reload2 = true
          break
      }
      this.loading2 = false
    },
    refresh2() {
      this.reload2 = false
      this.getThirtyGDlist()
    },
    // 近30天工单故障率/完成率
    async getThirtygzList() {
      this.loading3 = true
      const { data: res } = await this.$http.post(`${yeWu}gdjs/gdwcgz`)
      switch (res.code) {
        case '0000':
          this.faultPieData = {
            // 故障
            id: 'gzwanchanlv2',
            index: 1,
            gzwanchanAll: res.data.count, // 总数
            count: res.data.gdgz, // 故障饼图
          }
          this.finishPieData = {
            // 完成
            id: 'gzwanchanlv',
            index: 0,
            gzwanchanAll: res.data.count, // 总数
            count: res.data.gdwc, // 完成饼图
          }
          break
        case '0013':
          this.pieData = {
            gzwanchanAll: 0, // 总数
            gzwanchan1: 0, // 完成饼图
            gzwanchan2: 0, // 故障饼图
          }
          break
        default:
          this.reload3 = true
          break
      }
      this.loading3 = false
    },
    refresh3() {
      this.reload3 = false
      this.getThirtygzList()
    },
    // 近30天工单故障、工单完成趋势
    async getThirtygdqus() {
      this.loading4 = true
      const { data: res } = await this.$http.post(`${xunJian}tj/gdqxts`)
      switch (res.code) {
        case '0000':
          var gztime = []
          var yc = []
          var zc = []
          res.data.ycCounts.forEach((item) => {
            yc.push(item.count)
            gztime.push(item.time)
          })
          res.data.zcCounts.forEach((item) => {
            zc.push(item.count)
          })
          this.chartData4 = {
            gdyueshijian: gztime,
            Thirtywc: zc,
            Thirtygz: yc,
          }
          break
        case '0013':
          this.chartData4 = {
            gdyueshijian: timestampToTime().tiemList,
            Thirtywc: [0],
            Thirtygz: [0],
          }
          break
        default:
          this.reload4 = true
          break
      }
      this.loading4 = false
    },
    refresh4() {
      this.reload4 = false
      this.getThirtygdqus()
    },
    // 近30天问题top5
    async getTopFList(type) {
      clearTimeout(this.Timer5)
      this.loading5 = true
      const params = new URLSearchParams()
      params.append('type', type)
      const { data: res } = await this.$http.post(`${xunJian}zpsb/selectBMTop`, params)
      switch (res.code) {
        case '0000':
          var a = []
          var b = []
          res.data.tops.forEach((item) => {
            switch (this.topType) {
              case 1: // 近30天问题TOP5
                a.push(item.lxmc)
                break
              default:
                // 近30天设备问题TOP5
                a.push(item.zcmc)
                break
            }
            b.push(item.count)
          })
          this.topData = {
            cityList: a,
            cityData: b,
          }
          break
        case '0013':
          this.topData = {
            cityList: ['无数据', '无数据', '无数据', '无数据', '无数据'],
            cityData: [0, 0, 0, 0, 0],
          }
          break
        default:
          this.reload5 = true
          break
      }
      this.loading5 = false
    },
    refresh5() {
      this.topData = {}
      this.reload5 = false
      switch (this.topType) {
        case 1: // 近30天问题TOP5
          this.topType = 1
          this.getTopFList('BM')
          break
        default:
          // 近30天设备问题TOP5
          this.topType = 2
          this.getTopFList('MC')
          break
      }
    },
    // 近30天问题TOP5 change 事件
    radioChang(val) {
      this.reload5 = false
      this.topData = {}
      switch (val) {
        case '近30天问题TOP5':
          this.topType = 1
          this.getTopFList('BM')
          break
        default:
          this.topType = 2
          this.getTopFList('MC')
          break
      }
    },
    // 近30天工单故障、工单完成趋势
    async getThirtygdlv() {
      this.loading6 = true
      const { data: res } = await this.$http.post(`${xunJian}tj/wtgzqxtss`)
      switch (res.code) {
        case '0000':
          var gztime = []
          var zc = []
          // var yc = []
          res.data.gzs.forEach((item) => {
            zc.push(item.count)
            gztime.push(item.time)
          })
          // res.data.wts.forEach((item) => {
          //   yc.push(item.count)
          // })
          this.lineData = {
            // names: ['问题总数', '问题新增'],
            // lineX: gztime,
            // value: [zc, yc]
            names: ['问题新增'],
            lineX: gztime,
            value: [zc],
          }
          break
        case '0013':
          this.lineData = {
            // names: ['问题总数', '问题新增'],
            // lineX: timestampToTime().tiemList,
            // value: [[0], [0]],
            names: ['问题新增'],
            lineX: timestampToTime().tiemList,
            value: [[0]],
          }
          break
        default:
          this.loading6 = true
          break
      }
      this.loading6 = false
    },
    refresh6() {
      this.reload6 = false
      this.getThirtygdlv()
    },
  },
}
</script>
<style lang="scss" scoped>
::v-deep .el-radio-button__inner {
  padding: 0 10px !important;
}
.wjjgd {
  background-color: #fff;
  height: 180px;
  padding: 20px;
  box-sizing: border-box;
  .wjjgdTupianBox {
    display: flex;
    align-items: center;
    margin-top: 20px;
    .wjjgdNumbox {
      display: flex;
      flex-direction: column;
      margin-left: 10px;
      > span:first-child {
        color: #ff9900;
        font-size: 46px;
      }
      > span:last-child {
        font-size: 12px;
        color: #333;
      }
    }
  }
}
.ThirtyGD {
  background-color: #fff;
  padding: 20px;
  height: 180px;
  box-sizing: border-box;
  .ThirtyGDItemBox {
    display: flex;
    justify-content: space-between;
    > li:nth-child(1) {
      background-color: #1989fa;
      margin-left: 0;
    }
    > li {
      width: 25%;
      height: 106px;
      padding: 20px;
      box-sizing: border-box;
      border-radius: 5px;
      box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
      margin-right: 15px;
      &:last-child {
        margin-right: 0;
      }
    }
    .ThirtyGDTupianBox {
      display: flex;
      align-items: center;
      margin-top: 20px;
      .ThirtyGDdNumbox {
        display: flex;
        flex-direction: column;
        margin-left: 10px;
        // > span:first-child {
        //   color: #fff;
        //   font-size: 30px;
        // }
        // > span:last-child {
        //   font-size: 12px;
        //   color: #fff;
        // }
      }
    }
  }
}
.gzwanchanBox {
  background-color: #fff;
  padding: 20px;
  box-sizing: border-box;
  height: 420px;
}
#gdqushi {
  background-color: #fff;
}
.topBox {
  background-color: #fff;
  height: 410px;
  padding: 20px;
  box-sizing: border-box;
}
.Thirtywtgzzs {
  background-color: #fff;
  height: 410px;
  padding: 20px;
  box-sizing: border-box;
}
</style>
